<template>
  <a-card size="small" :bordered="false" title="系统配置">
    <a-spin :spinning="loading">
      <a-form :model="formData" :label-col="{ span: 4 }" :wrapper-col="{ span: 10 }">
        <a-form-item label="联系电话" required>
          <a-input v-model:value="formData.tel" placeholder="请输入联系电话" />
        </a-form-item>
        <a-form-item label="联系微信" required>
          <a-input v-model:value="formData.wx" placeholder="请输入联系微信" />
        </a-form-item>
        <a-form-item label="联系QQ" required>
          <a-input v-model:value="formData.qq" placeholder="请输入联系QQ" />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="handleSubmit">提交</a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-card>
</template>

<script name="SystemConfigSystem" lang="ts" setup>
import { getConfig, updateConfig } from "@/api/system/config";

const configKey = "contact";
const loading = ref(false);
const formData = reactive({
  tel: "",
  wx: "",
  qq: ""
});

const handleLoadData = () => {
  loading.value = true;
  getConfig(configKey)
    .then(response => {
      Object.assign(formData, response.data);
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleSubmit = () => {
  loading.value = true;
  updateConfig({
    configKey,
    configValues: formData
  })
    .then(() => {
      antdMessage.success("保存成功");
      handleLoadData();
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  handleLoadData();
});
</script>
